<template>
  <div class="home">
    <img alt="Vue logo" src="~address/logo.png" />
    <img alt="Vue logo" src="~_c/logo.png" />
    <img alt="Vue logo" src="@/assets/logo.png" />
    <img alt="Vue logo" src="~@/assets/logo.png" />
    <img alt="Vue logo" :src="`${publicPath}images/logo.png`" />
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。 -->
    <HelloWorld
      class="hello-world"
      msg="Welcome to Your Vue.js + TypeScript App"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "_c/HelloWorld.vue";

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  publicPath: string = process.env.BASE_URL;
}
</script>

<style lang="less" scoped>
// 深度作用选择器 https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8
// 通过 v-html 动态生成的 DOM 内容不受 scoped 样式影响，可以使用 深度作用选择器 来控制其样式
.hello-world ::v-deep h1 {
  font-size: 66px;
}
</style>
